<template>
  <div class="wrap">
    <div class="clear"></div>
    <div class="titles">
      员工列表
      <div class="addpar" @click="editStaffMans()">
          <img class="add" src="../../images/main/add.png" alt> 增加员工
        </div>
    </div>
    <el-table :data="staffList" stripe style="width: 100%">
          
        <el-table-column align="center" prop="name" label="员工姓名" ></el-table-column>
        <el-table-column align="center" prop="user_account" label="员工账号"></el-table-column>
        <el-table-column align="center" prop="phone" label="员工手机号" ></el-table-column>
        <el-table-column align="center" prop="role_name" label="角色名称" ></el-table-column>
        <el-table-column align="center" prop="phone" label="创建时间" >
          <template slot-scope="scope">
            <div>{{setDate(scope.row.time)}}&nbsp;&nbsp;{{setTime(scope.row.time)}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phone" label="操作" >
          <template slot-scope="scope">
          <div>
            <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div>
                  <el-button @click="permissionConfiged(scope.row.id)" type="primary" size="mini" round>权限配置</el-button>
                </div>
                <div>
                  <el-button @click="editStaffMans(scope.row.id)" type="primary" size="mini" round>编辑</el-button>
                </div>
                <div>
                  <el-button @click="rePass(scope.row.id)" type="primary" size="mini" round>重置密码</el-button>
                </div>
                <div>
                  <el-button @click="rePass(scope.row.id)" type="primary" size="mini" round>删除</el-button>
                </div>
              </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
            
          </div>
          </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;padding: 50px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-count="pageTotal"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      staffList: [],
      pageTotal: 1,
      data: {
        page: 1,
        limit: 10
      }
    };
  },
  methods: {
    // 分页
    changePage(argv) {
      this.data.page = argv;
      this.getMansList();
    },
    /**
     * 设置密码
     */
    rePass: function(id) {
      // Global.mansId = id;
      // this.$router.push({
      //   path: "/main/setPass"
      // });
      var that = this
      this.$confirm("是否确认重置密码？").then(() => {
        axios({
          method: "post",
          url: `${this.$store.state.url}/sysEmployee/updatePwd`,
          data: qs.stringify({
            id: id
          })
        }).then(res => {
          this.$store.state.fn.success(res.data.msg);
          let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'重置员工密码',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${this.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
        });
      });
    },
    /**
     * 删除员工
     */
    delStaffMans: function(id) {
      let that = this;
      that.$confirm("是否删除?").then(() => {
        axios({
          method: "post",
          url: `${that.$store.state.url}/sysEmployee/delEmployee`,
          data: qs.stringify({ id: id })
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            that.getMansList();
            this.$store.state.fn.success(res.data.msg).then(() => {
              that.getMansList();
            });
            let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'删除员工',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
          } else {
            this.$alert(res.data.msg);
          }
        });
      });
    },
    /**
     * 编辑员工
     */
    editStaffMans: function(id) {
      let that = this;
      if (id) {
        Global.mansEdit = true;
        Global.mansId = id;
      } else {
        Global.mansEdit = false;
        Global.mansId = "";
      }
      that.$router.push({
        path: "/main/addMan"
      });
    },
    /**
     * 获取员工列表
     */
    getMansList: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysEmployee/selectEmployeeList`,
        data: qs.stringify(that.data)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.staffList = res.data.data;
        } else {
          alert(res.data.msg);
        }
      });
    },
    accParMan: function() {
      this.$router.push({
        path: "main/accParMan"
      });
    },
    // 权限配置
    permissionConfiged: function(id) {
      Global.mansId = id;
      this.$router.push({
        path: "/main/permissionConfig"
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getMansList();
  }
};
</script>
<style scoped>
.wrap {
  width: 90%;
  margin:  40px auto;
}
.titles {
      color: #909399;
    font-weight: 500;
    /* padding-left: 40px; */
    height: 32px;
    margin: 10px;
}
.addpar {
  float: right;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  width: 114px;
  height: 32px;
  background: rgba(75, 116, 255, 1);
  border-radius: 24px;
  border: 1px solid rgba(75, 116, 255, 1);
  line-height: 32px;
  text-align: center;
}
.show-menu {
  color: rgba(75, 116, 255, 1);
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
</style>
